<!--
 * @Author: AHANG
 * @Date: 2022-07-19 15:26:04
 * @LastEditors: AHANG
 * @LastEditTime: 2022-07-21 17:07:06
 * @Description:      ...mapState("students", ["desserts"]),
        ...mapActions("students", { getStudents: "getStudentInfo" }),
-->
<template>
  <div class="studentInfo">
    <v-skeleton-loader
      class="mx-auto"
      type="table"
      v-if="loader"
      tile
    ></v-skeleton-loader>

    <v-data-table
      v-if="!loader"
      :search="search"
      :headers="headers"
      :items="desserts"
      height="440px"
      sort-by="calories"
      class="elevation-1"
      fixed-header
    >
      <template v-slot:top>
        <v-toolbar flat>
          <v-toolbar-title>人员信息</v-toolbar-title>
          <v-btn @click="addUser" class="ml-5" outlined color="blue darken-1"
            >新增人员</v-btn
          >
          <v-spacer></v-spacer>
          <v-toolbar-title>
            <v-text-field
              v-model="search"
              append-icon="mdi-magnify"
              label="Search"
              single-line
              hide-details
            ></v-text-field>
          </v-toolbar-title>
        </v-toolbar>
      </template>
      <template v-slot:[`item.actions`]="{ item }">
        <v-icon
          small
          class="mr-2"
          @click="editItem(item)"
          color="blue darken-1"
        >
          mdi-pencil
        </v-icon>
        <v-icon small @click="deleteItem(item)" color="red lighten-2">
          mdi-delete
        </v-icon>
      </template>
      <template v-slot:no-data> </template>
    </v-data-table>
    <!-- dialogDelete -->
    <v-dialog v-model="dialogDelete" max-width="500px">
      <v-card>
        <v-card-title class="text-h5"> 删除此选项 </v-card-title>
        <v-card-text> 此操作将不可逆,是否删除😕? </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="closeDelete">
            Cancel
          </v-btn>
          <v-btn color="blue darken-1" text @click="deleteItemConfirm">
            YES?
          </v-btn>
          <v-spacer></v-spacer>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- dialog -->
    <v-dialog v-model="dialogTime" hide-overlay persistent width="300">
      <v-card color="primary" dark>
        <v-card-text>
          等待服务器响应
          <v-progress-linear
            indeterminate
            color="white"
            class="mb-0"
          ></v-progress-linear>
        </v-card-text>
      </v-card>
    </v-dialog>
    <!-- dialogEdit -->
    <v-dialog v-model="dialogEdit" width="50%">
      <v-card>
        <v-card-title class="text-h5"> {{ info }} </v-card-title>
        <v-card-text>
          <v-row class="editForm">
            <v-col cols="12" md="4">
              <v-text-field
                v-model="editItems.name"
                label="姓名"
              ></v-text-field>
            </v-col>
            <!-- <v-text-field dense value="" label="性别"></v-text-field> -->
            <v-col cols="12" md="4">
              <v-select
                :items="items"
                v-model="editItems.sex"
                label="性别"
              ></v-select>
            </v-col>
            <v-col cols="12" md="4">
              <v-select
                :items="nationalitys"
                v-model="editItems.mz"
                label="民族"
              ></v-select>
            </v-col>
          </v-row>
          <!-- row-2 -->
          <v-row class="editForm">
            <v-col cols="12" md="4">
              <v-text-field label="寝室" v-model="editItems.qs"></v-text-field>
            </v-col>
            <!-- <v-text-field dense value="" label="性别"></v-text-field> -->
            <v-col cols="12" md="4">
              <v-text-field
                v-model="editItems.id"
                :disabled="udisabled"
                label="证件"
              ></v-text-field>
            </v-col>
            <v-col cols="12" md="4">
              <v-text-field
                v-model="editItems.phone"
                label="手机"
              ></v-text-field>
            </v-col>
          </v-row>
          <!-- row-3 -->
          <v-row class="editForm">
            <v-col cols="12">
              <v-text-field
                v-model="editItems.address"
                label="住址"
              ></v-text-field>
            </v-col>
          </v-row>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn @click="SET_info()">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- snackbar -->
    <v-snackbar v-model="snackbar" top> {{ msg }} </v-snackbar>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { deleteUser, updateUser, addUser } from "@/api";
// import { deleteUser } from "@/api";
// import { deleteUser } from "@/api";
import { mapState, mapActions } from "vuex";
export default {
  data: () => ({
    udisabled: false,
    msg: "",
    search: "",
    loader: true,
    snackbar: false,
    deleteID: "",
    info: "",
    // building: "",
    // dormitory: "",
    // dialog: false,
    // dialogTime: false, //弹出等待dialog
    dialogEdit: false, //弹出修改dialog
    dialogDelete: false, //弹出删除dialog
    items: ["男", "女", "其他"],
    nationalitys: [
      "其他",
      "汉",
      "蒙古",
      "回",
      "藏",
      "维吾尔",
      "苗",
      "彝",
      "壮",
      "布依",
      "朝鲜",
      "满",
      "侗",
      "瑶",
      "白",
      "土家",
      "哈尼",
      "哈萨克",
      "傣",
      "黎",
      "傈僳",
      "佤",
      "畲",
      "高山",
      "拉祜",
      "水",
      "东乡",
      "纳西",
      "景颇",
      "柯尔克孜",
      "土",
      "达斡尔",
      "仫佬",
      "羌",
      "布朗",
      "撒拉",
      "毛南",
      "仡佬",
      "锡伯",
      "阿昌",
      "普米",
      "塔吉克",
      "怒",
      "乌孜别克",
      "俄罗斯",
      "鄂温克",
      "德昂",
      "保安",
      "裕固",
      "京",
      "塔塔尔",
      "独龙",
      "鄂伦春",
      "赫哲",
      "门巴",
      "珞巴",
      "基诺",
    ], //民族

    editItems: {
      name: "",
      sex: "",
      mz: "",
      qs: "",
      id: "",
      phone: "",
      address: "",
    },
    headers: [
      {
        text: "姓名",
        align: "start",
        sortable: false,
        value: "name",
      },
      { text: "性别", value: "sex" },
      { text: "民族", value: "mz" },
      { text: "寝室", value: "qs" },
      { text: "证件", value: "id", sortable: false },
      { text: "手机", value: "phone", sortable: false },
      { text: "住址", value: "address", sortable: false },
      { text: "Actions", value: "actions", sortable: false },
    ],
  }),
  computed: {
    ...mapState("user", {
      desserts: (state) => state.studentsInfo,
    }),
    ...mapState("global", {
      dialogTime: (state) => state.dialogTime,
    }),
  },

  watch: {
    desserts(val) {
      if (val.length > 0) {
        this.loader = false;
      }
    },
  },

  created() {
    this.$store.dispatch("user/GET_studentsInfo").then(() => {});
  },
  methods: {
    //新增
    addUser() {
      this.udisabled = false;
      this.info = "新增信息";
      [
        this.editItems.name,
        this.editItems.sex,
        this.editItems.mz,
        this.editItems.qs,
        this.editItems.id,
        this.editItems.phone,
        this.editItems.address,
      ] = [""];
      this.dialogEdit = true;
    },
    deleteItem(item) {
      //点击删除按钮后执行
      // console.log(item);
      this.deleteID = item.id;
      // console.log(this.deleteID);
      this.dialogDelete = true;
    },
    editItem(item) {
      this.info = "修改信息";
      //点击修改按钮后执行
      console.log(item);
      this.editItems = Object.assign({}, item);
      this.dialogEdit = true;
      this.udisabled = true;
      // console.log(this.editItems);
    },
    //进行删除item操作
    deleteItemConfirm() {
      // console.log(this.deleteID);
      // this.dialogTime = true;
      this.$store.commit("global/SET_DIALOG_TIME");
      deleteUser(this.deleteID)
        .then((res) => {
          this.$store.dispatch("user/GET_studentsInfo");
          console.log(res);
          this.msg = res.data.msg;
          this.dialogDelete = false;
          // this.dialogTime = false;
          this.$store.commit("global/SET_DIALOG_TIME");
          this.snackbar = true;
        })
        .catch((err) => {
          this.msg = "服务器响应失败";
          console.log(err);
          setTimeout(() => {
            this.snackbar = true;
            this.dialogTime = false;
          }, 5000);
        });
    },

    closeDelete() {
      this.dialogEdit = false;
      this.dialogDelete = false;
    },
    SET_info() {
      this.$store.commit("global/SET_DIALOG_TIME");

      if (this.info === "修改信息") {
        updateUser(this.editItems).then((res) => {
          this.$store.commit("global/SET_DIALOG_TIME");
          this.$store.dispatch("user/GET_studentsInfo");
          this.dialogEdit = false;
          this.msg = res.data.msg;
          this.snackbar = true;
          // console.log(res);
        });
        console.log(this.editItems);
      }
      if (this.info === "新增信息") {
        addUser(this.editItems).then((res) => {
          this.$store.commit("global/SET_DIALOG_TIME");
          this.$store.dispatch("user/GET_studentsInfo");
          this.dialogEdit = false;
          this.msg = res.data.msg;
          this.snackbar = true;
        });
        console.log(this.editItems);
      }
    },
  },
};
</script>
<style scoped>
.editForm {
  text-align: center;
}
</style>
